import React from 'react';

class Prent extends React.Component {
  // 1. 父组件声明一个回调函数
  // 5. 在回调中声明形参, 用来接收子组件传递的数据
  getData = (data) => {
    console.log(data)
  }
  render() {
    return (
      <div>
        <p>父组件</p>
        {/* 3. 父组件将回调函数传递给子组件 */}
        <Son getMsg={ this.getData }/>
      </div>
    )
  }
}

class Son extends React.Component {
  // 2. 子组件定义要传递的参数
  state = {
    age: 10
  }
  handleClick = () => {
    // 4. 使用props接收父组件传递过来的回调函数
    // console.log(this.props.getMsg) // getData函数
    this.props.getMsg(this.state.age)
  }
  render() {
    return (
      <div>
        <p>子组件</p>
        <p>
          <button onClick={this.handleClick}>点击</button>
        </p>
      </div>
    )
  }
}

export default Prent